import React, { Component } from "react";
import ReactDOM from "react-dom";
import {
    FLOW_CONTROL_1,
    FLOW_CONTROL_2,
    FLOW_CONTROL_3,
    FLOW_CONTROL_4
} from "./AppConst";



/**
 * React 组件
 * @date:2020-11-22
 */

/**
 * 组件构建的两种方式
 *  1. 通过函数构建 , 也叫函数组件
 *  2. 通过ES6 class构建 , 也叫Class组件
 * 
 * 注意事项：
 *   原生 HTML 元素名以小写字母开头，而自定义的 React 类名以大写字母开头，
 *       比如 HelloMessage 不能写成 helloMessage。除此之外还需要注意组件类只能包含一个顶层标签，否则也会报错。
 *   在添加属性时， class 属性需要写成 className ，for 属性需要写成 htmlFor ，这是因为 class 和 for 是 JavaScript 的保留字。
 */
/**
 * 通过函数构建的组件
 */
function HelloworldComponent() {
    console.log("HelloworldComponent init...");
    return <h1>我是通过Function , 构建的第一个Hello world组件</h1>
}

/**
 * 简单的通过函数构建的组件
 */
function sampleFuncComponent() {
    console.log("sampleFuncComponent");
    return <HelloworldComponent />
}


/**
 * 通过ES6 Class 构建组件
 */
class Welcome extends React.Component {
    render() {
        return <h1>我是通过Es6 Class , 构建的第一个Hello world组件</h1>
    }
}

/**
 * 构建Welcome组件
 */
function sampleEs6ClassComponent() {
    return <Welcome />
}


/**
 * 人类组件
 */
function UserInfoComponent(props) {
    var element = <div>
        <h1>租房信息</h1>
        <h2>姓名:{props.username}</h2>,
        <h2>年龄:{props.age}</h2>
        <h2>性别:{props.sex}</h2>
        <h2>电话号码:{props.phone}</h2>
        <h2>住址:{props.address}</h2>
    </div>
    return element
}

/**
 * 用户信息
 */
function sampleUserInfoComponent() {
    return <UserInfoComponent username='kasa' age='22' sex='男' phone='85533304' address='广东.深圳' />
}

/** ------------------------ 复合组件 ------------------ */
function WetsiteName(props) {
    return <h1>站点名称:{props.sitename}</h1>
}
function WetsiteUrl(props) {
    return <h1>站点名称:{props.siteurl}</h1>
}
function WetsiteAiaisName(props) {
    return <h1>站点别名:{props.aiaisname}</h1>
}

/**
 * 站点组件
 */
function Website() {
    var element =
        <div>
            <WetsiteName sitename='菜鸟教程' />
            <WetsiteUrl siteurl='http://www.runoob.com' />
            <WetsiteAiaisName aiaisname='Runoob' />
        </div>
    return element
}
/** ------------------------ 复合组件 ------------------ */

function buildComponentUi(flag) {
    console.log("buildComponentUi flag = " + flag);
    switch (flag) {
        case FLOW_CONTROL_1:
            return sampleFuncComponent();
        case FLOW_CONTROL_2:
            return sampleEs6ClassComponent();
        case FLOW_CONTROL_3:
            return sampleUserInfoComponent();
        case FLOW_CONTROL_4:
            return Website();
    }
}



/**
 * 执行渲染
 * @param {标记位} flag 
 */
function execRender(flag) {
    console.log("execRender flag = " + flag);
    ReactDOM.render(
        buildComponentUi(flag),
        document.getElementById('container')
    );
}


/**
 * React 组件演示入口
 */
function componentMain() {
    console.log("componentMain");
    execRender(FLOW_CONTROL_4);
}

export { componentMain }